import React, { useState } from "react";
import "@/styles/custom/file.scss";
import {
  FileOutlined,
  PauseCircleOutlined,
  CloseCircleOutlined,
  InboxOutlined,
  PlayCircleOutlined,
} from "@ant-design/icons";
import { Upload, Progress, Button } from "antd";
import PropTypes from "prop-types";

// 文件上传组件重构
const FileInfoComponent = ({ customRequest }) => {
  const [fileList, setFileList] = useState([]);
  const [info, setInfo] = useState({});

  const hanldeCustomRequest = (options) => {
    const { file } = options;
    // 重构选择文件返回对象
    const result = {
      file,
      onProgress: (percent) => {
        percent = +percent.toFixed(0);
        setInfo((item) => ({ ...item, [file.uid]: { ...item[file.uid], message: `${percent}%`, percent } }));
      },
      onMessage: (message) => {
        setInfo((item) => ({ ...item, [file.uid]: { ...item[file.uid], message } }));
      },
      onError: (message) => {
        onStatusChange(options);
      },
      onSuccess: () => {
        setInfo((item) => ({
          ...item,
          [file.uid]: { ...item[file.uid], message: "", percent: 100, status: true },
        }));
      },
    };
    // 初始化参数
    setInfo((item) => ({
      ...item,
      [file.uid]: { message: "", percent: 0, status: false, isStop: false },
    }));
    // setIsStop((item) => ({ ...item, [file.uid]: false }));
    setFileList((fileList) => [...fileList, result]);
    customRequest && customRequest(result);
  };

  // 状态变更
  const onStatusChange = (options) => {
    const flag = !info[options.file.uid].isStop;
    options.stop = flag;
    setInfo((item) => ({ ...item, [options.file.uid]: { ...item[options.file.uid], isStop: flag } }));
    !flag && customRequest(options);
  };

  // 移除上传文件(终止)
  const onRemove = (options) => {
    options.stop = true;
    setFileList((fileList) => fileList.filter((item) => item.file.uid === options.uid));
  };

  return (
    <>
      <Upload.Dragger customRequest={hanldeCustomRequest} multiple showUploadList={false}>
        <p className="ant-upload-drag-icon">
          <InboxOutlined />
        </p>
        <p className="ant-upload-text">支持单个或批量上传</p>
        <p className="ant-upload-text">拖动文件到此区域进行上传</p>
        <p className="ant-upload-hint">严禁上传公司数据或其他涉密文件</p>
      </Upload.Dragger>
      <div className="file-card">
        {fileList.map((item) => (
          <div className="file-item flex-container" key={item?.file.uid}>
            <FileOutlined style={{ fontSize: "16px" }} />
            <div className="file-info-card">
              <div className="file-info">
                <div>{item?.file.name}</div>
                <div className="button-card">
                  <span style={{ marginRight: "4px" }}>{info[item?.file.uid].message}</span>
                  {!info[item?.file.uid].status && (
                    <Button
                      type="text"
                      icon={info[item?.file.uid].isStop ? <PlayCircleOutlined /> : <PauseCircleOutlined />}
                      onClick={() => onStatusChange(item)}
                    />
                  )}
                  <Button type="text" icon={<CloseCircleOutlined />} onClick={() => onRemove(item)} />
                </div>
              </div>

              {!info[item?.file.uid]?.status && (
                <Progress
                  percent={info[item?.file.uid].percent || 0}
                  strokeWidth={4}
                  status="active"
                  style={{ marginBottom: "0px" }}
                  showInfo={false}
                />
              )}
            </div>
          </div>
        ))}
      </div>
    </>
  );
};
FileInfoComponent.propTypes = {
  customRequest: PropTypes.func.isRequired,
};

export default FileInfoComponent;
